<template>
  <input type="text" v-model="textValue" />
  <button @click="add">添加</button>

  <hr />

  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const [list, remove] = removeModule();
    const [textValue, add] = addModule(list);

    return {
      textValue,
      list,
      add,
      remove,
    };
  },
};

// 新增功能
const addModule = (list) => {
  const textValue = ref("");
  const add = () => {
    list.value.push({
      id: new Date().getTime(),
      name: textValue.value,
    });
    textValue.value = "";
  };
  return [textValue, add];
};

// 删除功能
const removeModule = () => {
  const list = ref([
    {
      id: 1,
      name: "zhangsan",
    },
    {
      id: 2,
      name: "lisi",
    },
  ]);
  const remove = (id) => {
    list.value = list.value.filter((item) => item.id !== id);
  };
  return [list, remove];
};
</script>
